<template>
  <header>
    <div class="worp topbarTop">
      <div>
        <span>欢迎来到叩丁狼积分商城</span>
      </div>
      <ul>
        <li class="userimg">
          <img :src="userInfo.headImg" alt="" /><span
            >用户名：{{ userInfo.nickName }}
          </span>
        </li>
        <li>我的积分：{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="cart-btn" v-if="isLocol">
          <img src="../assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ cartTotal }} </strong>
        </li>
        <li class="active" @click="changeIsShowLogin(true)" v-else>登录</li>
      </ul>
    </div>
  </header>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { WeixinLoginApi } from "@/request/api";
export default {
  created() {
    // 微信登录第二步：临时票据code换取token
    // 可能获取不到就用this.$nextTick(async ()=>{})
    // let mycode = this.$route.query.code;
    // if (!mycode) return;
    // let res = await WeixinLoginApi({
    //   code: mycode,
    // });
    // console.log("WeixinLoginApi", res);
    this.$nextTick(async () => {
      let mycode = this.$route.query.code;
      // if (!mycode) return;
      if (!mycode) {
        let mytoken = localStorage.getItem("x-auth-token");
        this.changeIsLogin(Boolean(mytoken));
        if (mytoken) {
          // console.log("更新了信息");
          this.asyncChangeUserInfo();
        } else {
          // console.log("执行了初始化");
          this.initUserInfo();
        }
        return;
      }
      let res = await WeixinLoginApi({
        code: mycode,
      });
      // console.log("WeixinLoginApi", res);
      if (res.code == 0) {
        // alert("登录成功");
        this.asyncIsshowToast({
          msg: "登录成功",
          type: "warning",
        });
        localStorage.setItem("x-auth-token", res["x-auth-token"]);
        this.$router.push(this.$route.path)
        this.changeIsLogin(true);
        this.asyncChangeUserInfo();

        // localStorage.setItem("uuid", res.uuid);
      } else if (res.code == 400) {
        // alert("请重新扫码登录一次");
        this.asyncIsshowToast({
          msg: "请重新扫码登录一次",
          type: "warning",
        });
        this.changeIsShowLogin(true);
      } else if (res.code == 407) {
        // alert("请使用手机号码验证码登录一次");
        this.asyncIsshowToast({
          msg: "请使用手机号码验证码登录一次",
          type: "warning",
        });
        this.changeIsShowLogin(true);
        localStorage.setItem("uuid", res.uuid);
      }
    });
  },
  computed: {
    ...mapState({
      isLocol: (state) => state.Locol.isLocol,
      userInfo: (state) => state.userInfo.userInfo,
      cartTotal: (state) => state.userInfo.cartTotal,
    }),
  },
  watch: {
    // 监听路由的变化
    "$route.path": {
      handler(newVal, oldVal) {
        // 什么时候执行这里的代码？？ 路由发生变化的时候
        // console.log(newVal, oldVal);
        let mytoken = localStorage.getItem("x-auth-token");
        // if(mytoken){
        //   this.changeIsLogined(true);
        // }else{
        //   this.changeIsLogined(false);
        // }
        this.changeIsLogined(Boolean(mytoken));
      },
    },
  },
  methods: {
    ...mapMutations({
      changeIsShowLogin: "showModal/changeIsShowLogin",
      changeIsLogin: "Locol/changeIsLogin",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
      asyncIsshowToast: "showtoast/asyncIsshowToast",
    }),
  },
};
</script>
 
<style lang = "less" scoped>
header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #242b39;
  color: #fffefe;
  .topbarTop {
    display: flex;
    justify-content: space-between;
    ul {
      display: flex;
      li {
        margin-left: 30px;
        cursor: pointer;
      }
      .active {
        width: 124px;
        height: 40px;
        background: #0a328e;
        text-align: center;
      }
    }
    .userimg {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        height: 26px;
        background: #7d8696;
        border: 1px solid #8891a1;
        border-radius: 13px;
        margin-right: 10px;
      }
    }
    .cart-btn {
      width: 124px;
      height: 40px;
      background: #0a328e;
      text-align: center;

      img {
        width: 20px;
        height: 19px;
        vertical-align: middle;
      }
      span {
        margin: 0 8px;
      }
      strong {
        width: 22px;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        border-radius: 50%;
        background-color: #fd604d;
      }
    }
  }
}
</style>